﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Client.aspx.cs" Inherits="famails.BackEnd.page.Client" MasterPageFile="~/Master.Master" %>


<%@ Register Assembly="CollectionPager" Namespace="SiteUtils" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width: 100%; padding: 10px;">

        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border: 1px solid #333; padding: 0px; margin-bottom: 10px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 10px 20px; background: #000; color: #fff; font-size: 18px; font-weight: bold; position: relative;">
                Tìm kiếm khách hàng
            </div>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <asp:Panel ID="pnSearch" runat="server">
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 0px;">
                    <div class="col-md-4 col-xs-6 col-sm-6 col-lg-4" style="height: auto; padding: 10px;">
                        <fieldset>
                                <label style="font-weight: bolder; text-transform: none;float:left;margin-right:10px;margin-top:5px;">
                                    Đăng ký từ</label>
                                <div id="txtFromDate"></div>
                        </fieldset>
                    </div>
                    <div class="col-md-4 col-xs-6 col-sm-6 col-lg-4" style="height: auto; padding: 10px;">
                        <fieldset>
                                <label style="font-weight: bolder; text-transform: none;float:left;margin-right:10px;margin-top:5px;">
                                    Đến</label>
                                <div id="txtToDate"></div>
                        </fieldset>
                    </div>
                    <div class="col-md-4 col-xs-12 col-sm-12 col-lg-4" style="height: auto; padding: 10px;">
                        <fieldset style="padding-top: 10px;">
                            <asp:Button ID="btnSearch" Style="padding: 6px 13px; text-align: center; background: #333; color: #fff; font-weight: bold; border-radius: 0px;" class="btn">
                                <span style="margin-right: 10px;" class="fa fa-desktop"></span>Lọc dữ liệu
                            </asp:Button>
                            <asp:Button ID="btnExportExcel" Style="padding: 6px 13px; text-align: center; background: #333; color: #fff; font-weight: bold; border-radius: 0px;" class="btn">
                                <span style="margin-right: 10px;" class="fa fa-mail-forward"></span>Xuất dữ liệu
                            </asp:Button>
                        </fieldset>
                    </div>
                </div>
                <div class="col-md-4 col-xs-12 col-sm-6 col-lg-4" style="height: auto; padding: 10px;">
                    <fieldset>
                        <p>
                            <label for="simple-input" style="font-weight: bolder; text-transform: none">
                                Khách hàng</label>
                            <asp:TextBox ID="txtName" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;"
                                runat="server"></asp:TextBox>
                        </p>
                    </fieldset>
                </div>
                <div class="col-md-4 col-xs-12 col-sm-6 col-lg-4" style="height: auto; padding: 10px;">
                    <fieldset>
                        <p>
                            <label for="simple-input" style="font-weight: bolder; text-transform: none">
                                Email</label>
                            <asp:TextBox ID="txtEmail" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;"
                                runat="server"></asp:TextBox>
                        </p>
                    </fieldset>
                </div>
                <div class="col-md-4 col-xs-12 col-sm-6 col-lg-4" style="height: auto; padding: 10px;">
                    <fieldset>
                        <p>
                            <label for="simple-input" style="font-weight: bolder; text-transform: none">
                                Số điện thoại</label>
                            <asp:TextBox ID="txtPhone" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;"
                                runat="server"></asp:TextBox>
                        </p>
                    </fieldset>
                </div>
                <style>
                    #groupsheader {
                        width: 100% !important;
                    }

                    #contentjqxgrid {
                        width: 100% !important;
                    }

                    #columntablejqxgrid {
                        width: 100% !important;
                    }

                    #pagerjqxgrid {
                        width: 100% !important;
                    }
                </style>

                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 0px;">
                    <div id='jqxWidget' style="width: 100% !important; font-size: 13px; font-family: Verdana; float: left;">
                        <div id="jqxgrid" style="width: 100% !important;">
                        </div>
                    </div>
                    <div id="popupWindow">
                        <div>
                            Xóa email
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn xóa tài khoản này không?
                            </p>
                            <button id="del">
                                Yes</button>
                            <button id="cancel">
                                No</button>
                        </div>
                    </div>

                    <div id="popupWindow_Lock">
                        <div>
                            Khóa tài khoản
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn khóa tài khoản này không?
                            </p>
                            <button id="lock_yes">
                                Yes</button>
                            <button id="lock_no">
                                No</button>
                        </div>
                    </div>
                    <div id="popupWindow_UnLock">
                        <div>
                            Mở khóa tài khoản
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn mở hóa tài khoản này không?
                            </p>
                            <button id="unlock_yes">
                                Yes</button>
                            <button id="unlock_no">
                                No</button>
                        </div>
                    </div>
                    <div id="popupWindow_Active">
                        <div>
                            Kích hoạt tài khoản
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn kích hoạt tài khoản này không?
                            </p>
                            <button id="active_yes">
                                Yes</button>
                            <button id="active_no">
                                No</button>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    jQuery(function ($) {

                        $("#txtFromDate").jqxDateTimeInput({ width: '150px', height: '25px' });
                        $("#txtToDate").jqxDateTimeInput({ width: '150px', height: '25px' });

                        $("#btnExportExcel").click(function () {
                            $("#jqxgrid").jqxGrid('exportdata', 'xls', 'client_list');
                        });
                        var imagerenderer = function (row, datafield, value) {
                            return '<input type="image" style="margin-left: 5px;" height="30" width="30" src="../resource/images/delete-icon.png"/>';
                        };

                        $("#btnSearch").click(function () {
                            var url = "Client.aspx/Search";
                            $("#jqxgrid").jqxGrid('showloadelement');
                            var postValue = "{name:'" + $('#ContentPlaceHolder1_txtName').val() + "',phone:'" + $('#ContentPlaceHolder1_txtPhone').val() + "',email:'" + $('#ContentPlaceHolder1_txtEmail').val() + "',from:'" + $('#txtFromDate').val() + "',to:'" + $('#txtToDate').val() + "'}";
                            $.ajax({
                                type: "POST",
                                url: url,
                                data: postValue,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    var source =
                            {
                                datatype: "json",
                                datafields: [
                                    { name: 'Clientid', type: 'int' },
                                    { name: 'Email', type: 'string' },
                                    { name: 'clientName', type: 'string' },
                                      { name: 'Phone', type: 'string' },
                                      { name: 'Address', type: 'string' },
                                      { name: 'PackageName', type: 'string' },
                                      { name: 'action', type: 'string' },
                                      { name: 'Sstatus', type: 'string' },
                                    { name: 'ActiveDate', type: 'date' },
                                    { name: 'ExpireDate', type: 'date' },
                                    { name: 'Limit', type: 'decimal' },
                                    { name: 'EmailCount', type: 'decimal' }
                                ],
                                id: 'Clientid',
                                localdata: data,
                                pager: function (pagenum, pagesize, oldpagenum) {
                                }
                            };
                                    var dataAdapter = new $.jqx.dataAdapter(source);
                                    $("#jqxgrid").jqxGrid(
                                    {
                                        width: $('#jqxWidget').width(),
                                        source: dataAdapter,
                                        selectionmode: 'multiplerowsextended',
                                        sortable: true,
                                        pageable: true,
                                        autoheight: true,
                                        columnsresize: true,
                                        columns: [
                                          { text: 'Họ tên', datafield: 'clientName',width:150 },
                                          { text: 'Email', datafield: 'Email',width:250,  cellsformat: 'D' },
                                          { text: 'Số điện thoại', datafield: 'Phone',  cellsformat: 'F2', cellsalign: 'right' },
                                          { text: 'Gói mail', datafield: 'PackageName',width:100 },
                                          { text: 'Ngày đăng ký', datafield: 'ActiveDate',  cellsformat: 'dd/MM/yyyy' },
                                          { text: 'Ngày hết hạn', datafield: 'ExpireDate',  cellsformat: 'dd/MM/yyyy' },
                                          { text: 'Hạn ngạch', datafield: 'Limit',  cellsformat: 'number' },
                                          { text: 'Tổng', datafield: 'EmailCount', cellsformat: 'number' },
                                          { text: 'Trạng thái', datafield: 'Sstatus' },
                                          {
                                              text: 'Chức năng', datafield: 'action', columntype: 'button', buttonclick: function (row) {
                                                  editrowindex = row;
                                                  id = $("#jqxgrid").jqxGrid('getrowid', row);
                                                  email = $("#jqxgrid").jqxGrid('getcellvalue', row, "Email");
                                                  var action = $("#jqxgrid").jqxGrid('getcellvalue', row, "action");
                                                  var offset = $("#jqxgrid").offset();
                                                  if (action == "Khóa") {
                                                      $("#popupWindow_Lock").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                                      // show the popup window.
                                                      $("#popupWindow_Lock").jqxWindow('show');
                                                  }
                                                  else if (action == "Mở khóa") {
                                                      $("#popupWindow_UnLock").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                                      // show the popup window.
                                                      $("#popupWindow_UnLock").jqxWindow('show');
                                                  }
                                                  else {
                                                      $("#popupWindow_Active").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                                      // show the popup window.
                                                      $("#popupWindow_Active").jqxWindow('show');
                                                  }
                                              }
                                          },
                                           {
                                               text: 'Xóa', datafield: 'Delete', columntype: 'button', width: 50, cellsrenderer: function () {
                                                   return "Xóa";
                                               }, buttonclick: function (row) {
                                                   // open the popup window when the user clicks a button.
                                                   id = $("#jqxgrid").jqxGrid('getrowid', row);
                                                   //alert(id);
                                                   var offset = $("#jqxgrid").offset();
                                                   $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                                   // show the popup window.
                                                   $("#popupWindow").jqxWindow('show');
                                               }
                                           }]
                                    });

                                }
                            });
                        });
                        $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
                        $("#popupWindow_Lock").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#lock_no"), modalOpacity: 0.01 });
                        $("#popupWindow_UnLock").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#unlock_no"), modalOpacity: 0.01 });
                        $("#popupWindow_Active").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#active_no"), modalOpacity: 0.01 });
                        $("#del").jqxButton({ theme: theme });
                        $("#cancel").jqxButton({ theme: theme });
                        $("#lock_yes").jqxButton({ theme: theme });
                        $("#lock_no").jqxButton({ theme: theme });
                        $("#unlock_yes").jqxButton({ theme: theme });
                        $("#unlock_no").jqxButton({ theme: theme });
                        $("#active_yes").jqxButton({ theme: theme });
                        $("#active_no").jqxButton({ theme: theme });
                        $("#del").click(function () {
                            //alert(id);
                            $.ajax({
                                type: "POST",
                                url: "Client.aspx/Delete",
                                data: "{clientid:" + id + "}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    $('#jqxgrid').jqxGrid('deleterow', id);
                                    $("#popupWindow").jqxWindow('hide');
                                },
                                error: function (request, status, error) {
                                    alert('Tài khoản này đã phát sinh gửi mail. Bạn không được phép xóa!');
                                    $("#popupWindow").jqxWindow('hide');
                                }
                            });
                        });
                        $("#cancel").click(function () {
                            $("#popupWindow").jqxWindow('hide');
                        });

                        $("#active_yes").click(function () {
                            //alert(email);
                            $.ajax({
                                type: "POST",
                                url: "Client.aspx/Active",
                                data: "{clientid:" + id + ", email:'" + email + "'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    //$('#jqxgrid').jqxGrid('deleterow', id);
                                    $("#popupWindow_Active").jqxWindow('hide');
                                    $("#jqxgrid").jqxGrid('setcellvalue', editrowindex, 'Sstatus', 'Bình thường');
                                    $("#jqxgrid").jqxGrid('setcellvalue', editrowindex, 'action', 'Khóa');
                                }
                            });
                        });
                        $("#active_no").click(function () {
                            $("#popupWindow_Active").jqxWindow('hide');
                        });
                        $("#lock_yes").click(function () {
                            $.ajax({
                                type: "POST",
                                url: "Client.aspx/UnLock",
                                data: "{clientid:" + id + ", action:'Lock'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    //$('#jqxgrid').jqxGrid('deleterow', id);
                                    $("#popupWindow_Lock").jqxWindow('hide');
                                    $("#jqxgrid").jqxGrid('setcellvalue', editrowindex, 'Sstatus', 'Tạm khóa');
                                    $("#jqxgrid").jqxGrid('setcellvalue', editrowindex, 'action', 'Mở khóa');
                                }
                            });
                        });
                        $("#lock_no").click(function () {
                            $("#popupWindow_Lock").jqxWindow('hide');
                        });
                        $("#unlock_yes").click(function () {
                            $.ajax({
                                type: "POST",
                                url: "Client.aspx/UnLock",
                                data: "{clientid:" + id + ", action:'unlock'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    //$('#jqxgrid').jqxGrid('deleterow', id);
                                    $("#popupWindow_UnLock").jqxWindow('hide');
                                    $("#jqxgrid").jqxGrid('setcellvalue', editrowindex, 'Sstatus', 'Bình thường');
                                    $("#jqxgrid").jqxGrid('setcellvalue', editrowindex, 'action', 'Khóa');
                                }
                            });
                        });
                        $("#unlock_no").click(function () {
                            $("#popupWindow_UnLock").jqxWindow('hide');
                        });
                    });
                </script>
                <script type="text/javascript">
                    $(function () {
                        $('#ContentPlaceHolder1_txtFromDate').datetimepicker({
                            changeMonth: true, changeYear: true, timeFormat: "", dateFormat: "dd/mm/yy"
                        });
                        $('#ContentPlaceHolder1_txtToDate').datetimepicker({
                            changeMonth: true, changeYear: true, timeFormat: "", dateFormat: "dd/mm/yy"
                        });
                    });
                </script>
            </asp:Panel>
        </div>

        </div>
</asp:Content>
